<template>
  <a-table :columns="columns"
           :data-source="purchaseData"
           :row-key="record => record.id"
           :loading="loading">
    #封面渲染
    <template #hddPic="{ text: hddPic }">
      <img v-if="hddPic" :src="hddPic" alt="avatar" class="ant-avatar"/>
    </template>
    <template v-slot:action="{ text, record }">
<!--      <a-space size="small">-->
<!--        <router-link :to="'?ID=' + record.id">-->

          <a-button @click="handleDetails(record.id)" type="primary">
            详情
          </a-button>
<!--        </router-link>-->
<!--      </a-space>-->
    </template>
    <template #hddName>
      <span>
        <smile-outlined />
        菜品名称
      </span>
    </template>
  </a-table>
  
<!--   食材详情页-->
  <a-modal
      title="食材详情页"
      v-model:visible="modalVisible"
      :confirm-loading="modalLoading"
      @ok="handleModalOk"
  >
    <a-form :model="efood" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="食材名称" v-model:value="efood.igdtName" />
      <a-form-item label="食材供应商" v-model:value="efood.supplierId" />
      <a-form-item label="食材入库时间" v-model:value="efood.storeTime" />
    </a-form>
  </a-modal>
  
</template>
<script lang="ts">

import { defineComponent, onMounted, ref } from 'vue';
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import axios from 'axios';

const columns = [
  {
    title: '菜品图片',
    dataIndex: 'hddPic',
    key: 'hddPic',
    slots: { customRender: 'hddPic'},
  },
  {
    title: '菜品名称',
    dataIndex: 'hddName',
    key: 'hddName',
  },
  {
    title: '菜品编号',
    dataIndex: 'hddNumber',
    key: 'hddNumber',
  },
  {
    title: '菜品价格',
    dataIndex: 'hddPrice',
    key: 'hddPrice',
  },
  {
    title: '食堂编号',
    dataIndex: 'hddHdrNumbe',
    key: 'hddHdrNumbe',
  },
  {
    title: '制作人',
    key: 'hddProducer',
    dataIndex: 'hddProducer',
  },
  {
    title: '购买时间',
    key: 'purchaseTime',
    dataIndex: 'purchaseTime',
  },
  {
    title: 'Action',
    key: 'action',
    slots: { customRender: 'action' }
  }
];


export default defineComponent({
  setup() {
    // 通过菜品查看食材
    const efood= ref();
    const handleDetails = (record: any) => {
      alert(record.id);

      efood.value = record;
      axios.get("/purchase/ingredients",{
        params:{
          hddNumber:efood.value.hddNumber,
          purchaseTime:efood.value.purchaseTime
        }
      }).then((response)=>{
        const data = response.data;
        if(data.success){
          efood.value = data.content;
          alert(data.content);
        }else {
          alert("cuowu");
        }
      })
    };

    const purchaseData = ref();

    onMounted(()=>{
      axios.get("/purchase/purchaseList",{
        params:{
          huiHsuId:'S20200648'
        }
      }).then((response)=>{
        const data = response.data;
        if(data.success){
          purchaseData.value = data.content;
          alert(data.content);
        }else {
          alert("cuowu");
        }
      })
    })


    return {
      purchaseData,
      columns,
      efood,
      handleDetails
    };

    },
  components: {
    SmileOutlined,
    DownOutlined,
  },
});
</script>
<!--scoped 表示增加的样式只在当前的home.vue页面生效-->
<style scoped>
.ant-avatar{
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 8%;
  margin: 5px 0;
}


</style>
